@extends('layouts.back_stage')
@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="/static/css/code.css"/>
@endsection
@section('content')
    <div class="code">
        <div class="code_top">
            <input type="text" class="code_inp" />
        </div>
        <div class="code_center">
            <span class="code_span">大码:</span>
            <dl class="code_dl">
                <dt class="code_dt"></dt>
                <dd class="code_dd"></dd>
            </dl>
        </div>
        <div class="code_bottom">
            <span class="code_span">小码:</span>
            <ul class="code_ul">
           
            </ul>
        </div>
    </div>
    <div class="mask" style="display: none"></div>
    <script>
        //自动获取焦点
        setTimeout(function () {
            $(".code_inp").focus();
        },50);
        $(function(){
            $('.code_inp').blur(function () {
                var that = this;
                setTimeout(function () {
                    $(that).focus();
                },100);
            });
        });
        /*input实时监控*/
        $(".code_inp").on("input",function(){
            var old_code = $('.code_inp').val();
            var code;
            // if(old_code.length == 66 || old_code.length == 32){
            //     return false;
            // }
            // if(old_code.length >= 32){
            //     if(old_code)
            // }
            if(old_code.substr(0,1) == "2"){
                if(old_code.length != 32){
                    return false;
                }else{
                    code = old_code;
                }
            }
            if(old_code.substr(0,1) == "h"){
                if(old_code.length != 66){
                    return false;
                }else{
                    code = old_code.substr(-32,32);
                }
            }
            console.log(code);
            // return false;
            // // var code = old_code.substr(-32,32);
			$('.code_inp').val('');
			var img_url = '{{ env('CDN_DOMAIN_NAME') }}';
            if (code != '') {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '/out-stage/associateCode',
                    data: {'code':code},
                    success: function (data) {
                        var txt=data.msg;
                        if(data.msg !=''){
                    		$(".mask").html(txt);
							$(".mask").slideDown(1000,function(){					
								setTimeout(function(){
									$(".mask").slideUp(1000);
								},1000)					
							})
                    	}
                    	if(data.msg.substr(0,6) == '该大码已完成'){
                            $(".mask").html(txt);
                            $(".mask").slideDown(1000,function(){
                                setTimeout(function(){
                                    $(".mask").slideUp(1000);
                                },2000)
                            });
                            return false;
                        }
                        if(data.bigcode){
                        	//肯定先扫过大码
                        	var bigimg = img_url+'/qrcodes/'+data.simplecode.pro_id+'-3/'+data.bigcode+'.png';
                        	$(".code_dd").text(data.bigcode);  
                        	$(".code_dt").html("<img src="+bigimg+">");
                        	if(data.smallcode.length > 0){   
                        		// 遍历小码                       		
                        		var smallcode_ = '';
                        		for(var i = 0; i < data.smallcode.length ; i++){
                        			var smallimg = img_url+'/qrcodes/'+data.simplecode.pro_id+'-4/'+data.smallcode[i].qrcode+'.png';
                        			smallcode_ += "<li class='code_li'><p class='code_p1'><img src="+smallimg+"></p><p class='code_p2'>"+data.smallcode[i].qrcode+"</p><button class='code_del'>删除</button></li>"
                        		}	                        		
                        		$(".code_ul").html(smallcode_);
                        	}
                        	if(data.smallcode.length==0){
                        	    $(".code_ul").empty();
                            }
                        }else{
                        	$(".mask").html("请先扫大码");
							$(".mask").slideDown(1000,function(){					
								setTimeout(function(){
									$(".mask").slideUp(1000);
								},1000)					
							})
                        	//alert('请先扫大码！')
                        }
                        $('.code_inp').val('');
                    }
                })
            }
        });
        //点击删除
        $(document).on('click','.code_del',function(){
			var txt=$(this).prev(".code_p2").html();
			$(this).parent().remove();
			$.ajax({
				headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/out-stage/cancelAssociate',
                data: {'code':txt},
				dataType:'json',
				success:function(data){
                    $(".mask").html(data.msg);
                    $(".mask").slideDown(1000,function(){
                        setTimeout(function(){
                            $(".mask").slideUp(1000);
                        },1000)
                    })
				}
			});			
		})
    </script>
@endsection
